import {PageContainer, ProCard, ProForm, ProFormMoney, ProFormText, ProFormTextArea} from "@ant-design/pro-components";
import {Button, Form, message, Tabs, TabsProps} from "antd";
import {globalApi, handleGloblApi} from "@/services/admin-api/globalApi";
import {history} from "@umijs/max";
import {stringify} from "querystring";

export default () => {

  const onChange = (key: string) => {
    console.log(key);
  };

  const [form] = Form.useForm()
  const [formWallet] = Form.useForm()
  const [formPwd] = Form.useForm()

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '基本设置',
      children: <ProForm
        onFinish={async (values) => {
          if (values.usEmail || values.usPhone || values.usAddress || values.usDesc) {
            await handleGloblApi('/user/userUpdateBasic', values)
          } else {
            message.warning('请输入要修改的信息')
          }
        }} submitter={{
        render: (props, doms) => {
          return [
            // ...doms,
            <Button type={"primary"} onClick={() => {
              form.submit()
            }}>更新基本信息</Button>,
          ];
        },
      }} form={form} request={async (param) => {
        const r = await globalApi('/user/userBasic', param)
        return r.data
      }}>
        <ProFormText name="usUuid" disabled label="用户编码" width={"lg"}/>
        <ProFormText name="usEmail" label="邮箱" width={"lg"}/>
        <ProFormText name="usNickName" disabled label="昵称" width={"lg"}/>
        <ProFormText name="usRealName" disabled label="姓名" width={"lg"}/>
        <ProFormText name="usLoginName" disabled label="登录名" width={"lg"}/>
        <ProFormText name="usPhone" label="电话" width={"lg"}/>
        <ProFormText name="usAddress" label="地址" width={"lg"}/>
        <ProFormTextArea name="usDesc" label="个人签名" width={"lg"}/>
      </ProForm>,
    },
    {
      key: '2',
      label: '钱包',
      children: <ProForm
        onFinish={async (values) => {
          if (values.usBalance > 0 && values.money > 0) {
            await handleGloblApi('/user/withdraw', values)
          } else {
            message.warning('请输入合法金额')
          }
        }} submitter={{
        render: (props, doms) => {
          return [
            // ...doms,
            <Button type={"primary"} onClick={() => {
              formWallet.submit()
            }}>提现</Button>,
          ];
        },
      }} form={formWallet} request={async (param) => {
        const r = await globalApi('/user/balance', param)
        return r.data
        // return {usBalance: 100.9}
      }}>
        <ProFormMoney name="usBalance" disabled label="钱包余额" width={"lg"}/>
        <ProFormMoney name="money" label="提现金额" width={"lg"}/>
      </ProForm>,
    },
    {
      key: '3',
      label: '修改密码',
      children: <ProForm
        onFinish={async (values) => {
          if (values.newPwd === values.oldPwd) {
            message.error("新旧密码不可以一致")
          } else {
            if (values.newPwd !== values.verifyNewPwd) {
              message.error("新密码两次输入不一致")
            } else {
              await handleGloblApi('/user/changePwd', values)
              history.replace({
                pathname: '/user/login',
              });
            }
          }
        }} submitter={{
        render: (props, doms) => {
          return [
            // ...doms,
            <Button type={"primary"} onClick={() => {
              formPwd.submit()
            }}>提交</Button>,
          ];
        },
      }} form={formPwd}>
        <ProFormText.Password rules={[{required: true}]} name="oldPwd" label="旧密码" width={"lg"}/>
        <ProFormText.Password rules={[{required: true}]} name="newPwd" label="新密码" width={"lg"}/>
        <ProFormText.Password rules={[{required: true}]} name="verifyNewPwd" label="确认新密码" width={"lg"}/>
      </ProForm>,
    },
  ];

  return <PageContainer header={{title: '', breadcrumb: {},}}>
    <ProCard>
      <Tabs tabPosition={"left"} defaultActiveKey="1" items={items} onChange={onChange}/>
    </ProCard>
  </PageContainer>
}
